<template>
  <div class="editable-param-obj">
    <p class="editable-param-obj-name">
      {{paramItem.label}}
    </p>

    <template
      :key="compId + '_' + parentKeys.join('_') + '_' + paramKey + '_' + childParamKey + '_editable-param-obj'"
      v-for="(childParamItem, childParamKey) in paramItem.param_params">
        <EditableParam
          v-if="_isHasOwnProperty(paramVal, childParamKey)"
          :compId="compId"
          :paramItem="childParamItem"
          :paramKey="childParamKey"
          :paramVal="paramVal[childParamKey]"
          :parentKeys="[...parentKeys, paramKey]"
          :parentVal="paramVal"
          :original="original"
          :editableParamsLists="editableParamsLists"
          :editableParamsLists4Add="editableParamsLists4Add"
          :type="type"
          @change="val => onChange(val)">
        </EditableParam>
    </template>
  </div>
</template>

<script>
  import { isHasOwnProperty } from '@/utils/public.js';
  import { defineAsyncComponent } from 'vue';
  export default {
    name: 'editableParamObj',
    props: [
      'modelValue',
      'compId',
      'paramItem',
      'paramKey',
      'paramVal',
      'parentKeys',
      'parentVal',
      'original',
      'editableParamsLists',
      'editableParamsLists4Add',
      'type'
    ],
    emit: ['success'],
    components: {
      'EditableParam': defineAsyncComponent(() => import('@/views/card/components/recursion/EditableParam.vue')),
    },
    methods: {
      onChange(val) {
        this.$emit('success', val);
      },

      /* 工具类：数据处理 */
      _isHasOwnProperty(obj, key) {
        return isHasOwnProperty(obj, key);
      },
    },
  }
</script>

<style lang="scss">
  .editable-param-obj {
    display: block;
    padding: 15px 10px 5px 10px;
    margin-bottom: 15px;

    .editable-param-obj-name {
      position: relative;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      color: #303133;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &::before, &::after {
        content: '';
        height: 1px;
        background: #ddd;
        flex: 1;
        margin: 0 8px;
      }
    }
  }
</style>
